<template>
  <div class="Login">
    <div class="box">
      <h2>登录</h2>
      <a-form style="max-height: 100vw"
              :model="userInfo"
              name="basic"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
              autocomplete="off"
              @finish="onFinish"
              @finishFailed="onFinishFailed"
      >
        <div><label for="username">帐号</label></div>
        <input type="text" v-model="userInfo.username" id="username" placeholder="请输入帐号" required>
        <div class="username_feedback"></div>
        <div><label for="password">密码</label></div>
        <input type="password" v-model="userInfo.password" id="password" placeholder="请输入密码" required>
        <div class="password_feedback"></div>
        <div><input type="submit" value="登录" class="login_btn"></div>
      </a-form>
      <a href="javascript:void(0)" @click="mytest">test</a>
    </div>
  </div>
  {{msg.data}}
</template>

<script setup lang="ts">
import {reactive,ref} from 'vue';
import {message} from 'ant-design-vue';
import {LoginService} from "../api/axios/login";
import router from "../router";

// 类型声明
interface FormState {
  username: string;
  password: string;
}

// 影响式调用
const userInfo = reactive<FormState>({
  username: '',
  password: '',
});
// 点击提交功能的基本设计
const onFinish = () => {
  //调用业务逻辑处理层
  LoginService.login1(userInfo).then( (res:any)=>{
    if(res.data.code === 200){
      router.push({path:"/home"});
    }else{
      message.success(res.data.msg,2);
    }
  });
};

const msg = reactive({
  data:""
});

/**
 *
 */
const mytest = () => {
  //调用业务逻辑处理层
  LoginService.demo().then( (res:any)=>{
    msg.data = res.data;
    message.success(res.data.msg,1);
  });
};


// 出错以后的提交功能
const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
</script>

<style src="@/views/css/login.css" scoped>

</style>
